偽類（Pseudo-classes）

在 HTML 中其實並不具有偽類（Pseudo-classes）的概念，偽類實際上是 CSS 中的一個特性，它不是一個實際存在於 DOM Three 中的元素。

偽類選擇器允許你根據元素的 特定狀態 來選取到它，例如，偽類選擇器 :hover 會選曲道滑鼠指標懸停的元素上；而 :nth-child 則允許基於其在父元素中的順序選取子元素。透過偽類選擇棄，你可以在無需添加特定類別或 ID 的情況下，為元素的某些狀態來套用樣式，從而使 CSS 更具元件化和可重用性。

Master CSS 選取偽類（Pseudo-classes）

在 Master CSS 中，如同原生 CSS，你可以使用一個冒號 : 並緊接著偽類的名稱（元素的狀態），就可以來設定元素的偽類樣式，例如 :hover、:focus、:first-child 或 :checked 等。

例如建立一個滑鼠指標懸停時，你可以使用 :hover，透過下列的類別名稱，當滑鼠指標懸停在元素上，就會變更背景的顏色為紅色。

<div class="bg:blue-86 bg:red-86:hover ...">:hover</div>

看起來就像這樣：

產生的 CSS：

.bg\:blue-86 {
    background-color: rgb(208, 226, 254);
}

.bg\:red-86\:hover:hover {
    background-color: rgb(254, 216, 217);
}

CSS 的偽類都可以在 Master CSS 上做使用，每個偽類的特性與說明就不再此特別贅述，你可以參考如下分類大致上暸解一下：

• 使用者動作相關狀態：:hover、:active、:focus、:visited、:link
• 位置或結構相關的偽類：:root、:first-child、:last-child、:nth-child(n)、:nth-last-child(n)、:only-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-last-of-type(n)、:only-of-type
• 表單或元素相關狀態：:enabled、:disabled、:checked、:indeterminate
• 其他偽類：:target、:lang、:empty、:not

更細節的用法與瀏覽器的支援可以至 MDN Web Docs - Pseudo-classes 及 Can I use 這裡查詢。

偽元素（Pseudo-elements）

偽元素（Pseudo-elements）也是一個 CSS 強大的特性，如果想要針對頁面中特定的元素，修改其元素的特定內容或是在元素的前面或後面添加內容，你可以透過添加偽元素的方式，來建立這個非使用 HTML 標籤所標記的元素，最常見的例子便是 ::before 和 ::after，它們可以在選取到的特定元素前後插入新的內容。與偽類（Pseudo-classes）是基於元素狀態的特性不同，偽元素（Pseudo-elements）雖不是 HTML 所標記，但是透過 CSS 建立時實際上存在於 DOM Three 上，也就是說偽元素（Pseudo-elements）可能會影響到元素的其中一部分，透過使用為元素，你可以使用 CSS 對特定元素增加額外的內容與樣式，而且無須調整 HTML 的結構，使得 CSS 樣式與 HTML 結構之間保持分離。

Master CSS 選取偽元素（Pseudo-elements）

在 Master CSS 中選取偽元素，也如同原生 CSS，你可以使用兩個冒號 :: 並緊接著偽元素的名稱，例如 ::before 和 ::after 等。

例如建立一個價格的元素，接著使用 ::before 和 ::after 添加貨幣與單位的偽元素。

<span class="content:'$NT'::before mr:8::before content:'元'::after ...">1,680</span>

看起來就像這樣：

產生的 CSS：

.content\:\'\$NT\'\:\:before::before {
    content: "$NT";
}

.mr\:8\:\:before::before {
    margin-right: 0.5rem;
}

.content\:\'元\'\:\:after::after {
    content: "元";
}

CSS 的偽元素也都可以在 Master CSS 上做使用，實際上在標記這些 Master CSS 的類別時，與原生 CSS 行為一樣，偽元素使用兩個冒號 :: 或一個冒號 : ，Master CSS 也都能正確驅動產生出 CSS 並套用樣式。

<!-- 使用 2 個冒號標記偽元素 -->
<span class="content:'$NT'::before mr:8:before content:'元'::after ...">1,680</span>

<!-- 使用 1 個冒號標記偽元素 -->
<span class="content:'$NT':before mr:8:before content:'元':after ...">1,680</span>

更偽元素細節的用法與瀏覽器的支援可以至 MDN Web Docs - Pseudo-elements 及 Can I use 這裡查詢。